<template>
	<view class="content padding" v-show="load">
		<view class="border_radius">
			<view class="main_text">{{info.courierName}}: {{info.courierNo}}</view>
			<view class="pro_img_view">
				<image class="pro_img" v-for="(item,index) in info.images" :key="index" :src="item"></image>
			</view>
		</view>
		<view class="border_radius margin_top">
			<view class="width_full">
				<view class="time_line" v-for="(item,index) in title" :key="index">
					<view class="title" v-if="index!=info.status">{{item}}</view>
					<view class="title_" v-else>{{item}}
						<view class="horn"></view>
					</view>
				</view>
			</view>
			<view class="width_full margin">
				<view class="time_line" style="align-items: center;" v-for="index in 4" :key="index">
					<view :class="[index==0?'radius_enpty_line':index<=info.status?'radius_read_line':'radius_gray_line']"></view>
					<view :class="[index<=info.status?'radius_red':'radius_gray']"></view>
					<view :class="[index==3?'radius_enpty_line':index<info.status?'radius_read_line':'radius_gray_line']"></view>
				</view>
			</view>
			<view class="width_full">
				<view class="time_line" v-for="(item,index) in city" :key="index">
					<view class="title">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="border_radius margin_top">
			<view class="courier_title">物流详情</view>
			<view style="flex-direction: column;">
				<view v-for="(item,index) in info.infos" :key="index">
					<view class="courier_left">
						<view class="line_gray" v-if="index!=0"></view>
						<view class="line_empty" v-else></view>
						<view class="dto_red" v-if="index==0"></view>
						<view class="dto_gray" v-else></view>
						<view class="line_gray" v-if="index!=info.infos.length-1"></view>
						<view class="line_empty" v-else></view>
					</view>
					<view class="courier_right">
						<view style="color: #F54444;line-height: 40upx;" v-if="index==0">{{item.message}}</view>
						<view style="color: #333333;line-height: 40upx;" v-else>{{item.message}}</view>
						<view style="color: #888888;font-size: 24upx;margin-top: 10upx;">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js';
	import {
		getWithParam_
	} from '../../common/request.js';
	export default {
		data() {
			return {
				load: false,
				info: {},
				title: ['已发货', '运输中', '派件中', '已签收'],
				city: ['', '', '', '']
			}
		},
		onLoad(option) {
			this.initData(option.id)
		},
		methods: {
			initData(id) {
				getWithParam_(api.ORDER_COURIER, {
					orderId: id
				}).then(res => {
					this.info = res.data
					this.city[0] = res.data.sendAddress
					this.city[3] = res.data.receiveAddress
					this.load = true
				})
			}
		}
	}
</script>

<style>
	.line_empty {
		width: 3upx;
		flex: 1;
		background-color: #FFFFFF;
	}

	.line_gray {
		width: 3upx;
		flex: 1;
		background-color: #C9C9C9;
	}

	.dto_red {
		width: 15upx;
		height: 15upx;
		border-radius: 15upx;
		background-color: #F54444;
	}

	.dto_gray {
		width: 15upx;
		height: 15upx;
		border-radius: 15upx;
		background-color: #C9C9C9;
	}

	.courier_right {
		flex-direction: column;
		margin-left: 30upx;
		margin-top: 40upx;
		flex: 1;
	}

	.courier_left {
		flex-direction: column;
		align-items: center;
		width: 60upx;
	}

	.left_line_gray {
		width: 1px;
		flex: 1;
		background-color: #C9C9C9;
	}

	.left_line_empty {
		width: 1px;
		flex: 1;
		background-clip: rgba(0, 0, 0, 0);
	}

	.left_line_item {
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.round_red {
		width: 15upx;
		height: 15upx;
		border-radius: 15upx;
		background-color: #FE0036;
	}

	.round_gray {
		width: 15upx;
		height: 15upx;
		border-radius: 15upx;
		background-color: #C9C9C9;
	}

	.right_line {
		width: 80%;
		flex-direction: column;
	}

	.left_line {
		width: 20%;
		justify-content: center;
		flex-direction: column;
	}

	.courier_title {
		color: #333333;
	}

	.horn {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: -15upx;
		width: 0;
		height: 0;
		border-top: 20upx solid #FE0036;
		border-left: 10upx solid transparent;
		border-right: 10upx solid transparent;
	}

	.radius_enpty_line {
		height: 2px;
		flex: 1;
		background-color: rgba(0, 0, 0, 0);
	}

	.radius_gray_line {
		height: 2px;
		flex: 1;
		background-color: #C9C9C9;
	}

	.radius_read_line {
		height: 2px;
		flex: 1;
		background-color: #FE0036;
	}

	.margin {
		margin: 20upx 0;
	}

	.radius_gray {
		width: 25upx;
		height: 25upx;
		border-radius: 25upx;
		background-color: #C9C9C9;
	}

	.radius_red {
		width: 25upx;
		height: 25upx;
		border-radius: 25upx;
		background-color: #FE0036;
	}

	.title_ {
		color: #FFFFFF;
		background-color: #FE0036;
		position: relative;
		padding: 10upx 20upx;
		border-radius: 10upx;
	}

	.title {
		color: #555555;
		padding: 10upx 20upx;
		font-size: 24upx;
	}

	.width_full {
		width: 100%;
	}

	.time_line {
		flex: 1;
		justify-content: center;
	}

	.margin_top {
		margin-top: 30upx;
	}

	.border_radius {
		padding: 20upx;
		box-sizing: border-box;
		border-radius: 20upx;
		background-color: #FFFFFF;
		flex-direction: column;
	}

	.pro_img_view {
		flex-wrap: wrap;
	}

	.pro_img {
		width: 150upx;
		height: 150upx;
		margin: 20upx;
	}

	.main_text {
		color: #333333;
		font-size: 26upx;
	}
</style>
